<template>
    <div class="home" style="width: 100%;height:100%;">
        <div class="content">
            <div class="content-one">
                <div class="a1" style="cursor:pointer;" @click="goOrder">
                    <ul><img src="../../images/a1.png" alt=""></ul>
                    <ul>
                        <li>今日订单总数</li>
                        <li v-cloak>{{zData.t_order}}</li>
                    </ul>
                </div>
                <div class="a2" style="cursor:pointer;">
                    <ul><img src="../../images/a2.png" alt=""></ul>
                    <ul>
                        <li>今日销售总额</li>
                        <li v-cloak>{{zData.t_money}}</li>
                    </ul>
                </div>
                <div class="a3" style="cursor:pointer;">
                    <ul><img src="../../images/a3.png" alt=""></ul>
                    <ul>
                        <li>昨日销售总额</li>
                        <li v-cloak>{{zData.y_money}}</li>
                    </ul>
                </div>
                <div class="a4" style="cursor:pointer;">
                    <ul><img src="../../images/a4.png" alt=""></ul>
                    <ul>
                        <li>近7天销售总额</li>
                        <li v-cloak>{{zData.w_money}}</li>
                    </ul>
                </div>
            </div>
            </div>
            <!-- 订单统计 -->
            <div class="content-three">
              <div class="top">订单统计</div>
              <div class="container">
                  <div id="myChart2" style="width:100%;height:550px;"></div>
              </div>
            </div>
            <!-- 销售统计 -->
            <div class="content-three" style="margin-bottom:50px;">
              <div class="top">销售统计</div>
              <div class="container">
                  <div id="myChart3" style="width:100%;height:550px;"></div>
              </div>
            </div>
        </div>
    </div>
</template>
<script>
import Dingbu from "../header/dingbu.vue";
import { mapGetters, mapMutations, mapActions } from "vuex";
import {order_trend, money_trend, order_sta} from "../../api/home/home.js"
export default {
  data() {
    return {
      PageName: "系统首页",
      zData:{},
      sevenDate: [],
      orderData:[],
      moneyData:[]
    };
  },
  mounted() {
    var that = this
    that.getDay(0);
    that.getSevenDate();
    that.order_trend()
    that.money_trend()
    that.order_sta()
  },
  components: {
    Dingbu
  },
  methods: {
      // 获取日期,参数传入0是当天日期, -1是前一天日期, 以此类推
      getDay(day) {
        var that = this;
        var today = new Date();

        var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;

        today.setTime(targetday_milliseconds); //注意，这行是关键代码

        var tYear = today.getFullYear();
        var tMonth = today.getMonth();
        var tDate = today.getDate();
        tMonth = that.doHandleMonth(tMonth + 1);
        tDate = that.doHandleMonth(tDate);
        return tYear + "-" + tMonth + "-" + tDate;
      },
      doHandleMonth(month) {
        var m = month;
        if (month.toString().length == 1) {
          m = "0" + month;
        }
        return m;
      },
      // 获取最近七天
      getSevenDate() {
        var that = this;
        for (let i = 0; i > -7; i--) {
          that.sevenDate.push(that.getDay(i));
        }
        that.$data.sevenDate = that.sevenDate.reverse();
      },
      // 七天订单统计图
      echartOrder() {
        var that = this
        let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
        const option2 = {
          title: {
            text: "订单统计",
            subtext: "最近七天数据"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross"
            }
          },
          // 工具栏
          toolbox: {
            show: true,
            showTitle: false,
            feature: {
              saveAsImage: {},
              magicType: {
                //动态类型切换
                type: ["bar", "line"]
              }
            }
          },
          // x坐标
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.sevenDate
          },
          // y坐标
          yAxis: {
            type: "value",
            axisLabel: {
              formatter: ["0", "1000", "2000", "3000", "4000"]
            },
            axisPointer: {
              snap: true
            }
          },
          // 系列列表
          series: [
            {
              name: "订单量",
              type: "line",
              // 填充区域样式
              areaStyle: {
                normal: {
                  color: "#7AAFFE",
                  opacity: 0.3
                }
              },
              // 填充区域样式
              areaStyle: {
                normal: {
                  // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#007adf" // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#00ecbc" // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  },
                  opacity: 0.3
                }
              },
              // 平滑曲线显示
              smooth: true,
              data: this.orderData,
              color: ["#7AAFFE"],
              // 标记线
              markLine: {
                data: [{ type: "average", name: "平均值" }]
              }
            }
          ]
        };
        myChart2.setOption(option2)
        window.addEventListener('resize', function () {
            myChart2.resize();
        });
      },
      // 七天销售额统计图
      echartMoiney() {
        let myChart3 = this.$echarts.init(document.getElementById("myChart3"));
        const option3 = {
          title: {
            text: "销售统计",
            subtext: "最近七天数据"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross"
            }
          },
          // 工具栏
          toolbox: {
            show: true,
            showTitle: false,
            feature: {
              saveAsImage: {},
              magicType: {
                //动态类型切换
                type: ["bar", "line"]
              }
            }
          },
          // x坐标
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: this.sevenDate
          },
          // y坐标
          yAxis: {
            type: "value",
            axisLabel: {
              formatter: ["0", "1000", "2000", "3000", "4000"]
            },
            axisPointer: {
              snap: true
            }
          },
          // 系列列表
          series: [
            {
              name: "销售额",
              type: "line",
              // 填充区域样式
              areaStyle: {
                normal: {
                  color: "#7AAFFE",
                  opacity: 0.3
                }
              },
              // 填充区域样式
              areaStyle: {
                normal: {
                  // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#a8edea" // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#fed6e3" // 100% 处的颜色
                      }
                    ],
                    globalCoord: false // 缺省为 false
                  },
                  opacity: 0.3
                }
              },
              // 平滑曲线显示
              smooth: true,
              data: this.moneyData,
              color: ["#7AAFFE"],
              // 标记线
              markLine: {
                data: [{ type: "average", name: "平均值" }]
              }
            }
          ]
        };
        myChart3.setOption(option3)
        window.addEventListener('resize', function () {
            myChart3.resize();
        });
      },
      //最近七天订单
      order_trend() {
        var that = this
        order_trend({}).then(res=> {
          // console.log(res)
          that.orderData = Array.from(JSON.parse(res.data))
          that.echartOrder()
        })
      },
      //最近七天销售额
      money_trend() {
        var that = this
        money_trend({}).then(res=> {
          // console.log(res)
          var arr1 = Array.from(JSON.parse(res.data))
          for(let i = 0; i<arr1.length;i++) {
            arr1[i] = arr1[i] / 100
          }
          that.moneyData = arr1
          that.echartMoiney()
        })
      },
      //总览
      order_sta() {
        var that = this
        order_sta({}).then(res=> {
          // console.log(res)
          that.zData = res.data
        })
      },
      //跳转订单
      goOrder() {
        var that = this
        that.$router.push({name:'orderList'})
      }
  }
};
</script>
<style lang="scss" scoped>
@import "../../css/common.scss";
.content {
  width: 95%;
  margin: 0 auto;
  >.content-one {
    color: #66667F;
    margin-top: 20px;
    @include flex;
    @include flexLeftRight;
    > div {
      padding: 20px 0;
      width:22%;
      background: #ffffff;
      border-radius: 5px;
      box-shadow: 1px 1px 2px 2px #e6e6e6;
      text-align: center;
      > ul {
        display: inline-block;
        vertical-align: middle;
        > img {
          margin-top: 8px;
        }
        > li {
          vertical-align: middle;
          margin-top: 3px;
        }
        > li:first-child {
          font-size: 20px;
        }
        > li:last-child {
          font-size: 18px;
        }
      }
    }
  }
  //销售统计
  >.content-two {
    background: #fff;
    margin-top: 30px;
    box-shadow: 1px 1px 2px 2px #e6e6e6;
    border-radius: 6px;
    >.container {
      padding: 20px 0 20px 15px;
      >ul {
        width:30%;
        border-bottom: 1px solid #e6e6e6;
        padding: 5px 0;
        color: #666666;
        @include flex;
        @include flexLeftRight;
      }
    }
  }
  //订单统计
  >.content-three {
    width:100%;
    margin-top: 30px;
    background: #fff;
    box-shadow: 1px 1px 2px 2px #e6e6e6;
    border-radius: 6px;
    >.container {
      width:100%;
      padding: 0 10px;
    }
  }
  //总览
  >.content-four {
    font-size: 0;
    >.four {
      width:100%;
      display: inline-block;
      vertical-align: top;
      background: #fff;
      margin-top: 30px;
      box-shadow: 1px 1px 2px 2px #e6e6e6;
      border-radius: 6px;
      >.fourContent {
        @include flex;
        @include flexAround;
        padding: 20px 0;
        >ul {
          font-size: 16px;
          text-align: center;
          >li:first-child {
            font-size: 18px;
          }
        }
      }
    }
    >.fourLeft {
      margin-right:4%;
    }
  }
}
.top {
  font-size: 16px;
  color: #1ABC9C;
  font-weight:bolder;
  padding: 10px 0;
  padding-left: 15px;
  border-bottom: .5px solid #e6e6e6;
}

</style>

